<!--
 Copyright 2020 Google LLC

 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at

      http://www.apache.org/licenses/LICENSE-2.0

 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
-->

{{ define "cart" }}
    {{ template "header" . }}
    <div {{ with $.platform_css }} class="{{.}}" {{ end }}>
        <span class="platform-flag">
          {{$.platform_name}}
        </span>
      </div>
    <main role="main" class="cart">
        <div class="cart-bg">
            <div class="container py-3 px-lg-5 py-lg-5">
                {{ if eq (len $.items) 0 }}
                    <h3>Your shopping cart is empty!</h3>
                    <p>Items you add to your shopping cart will appear here.</p>
                    <a class="btn btn-info" href="/" role="button">Browse Products &rarr; </a>
                {{ else }}

                    <div class="row mb-3 py-2">
                        <div class="col">
                            <h3>{{ $.cart_size }} item
                                {{- if gt ($.cart_size) 1}}s{{end}}
                                in your cart</h3>
                        </div>
                        <div class="col text-right">
                            <form method="POST" action="/cart/empty">
                                <button class="btn btn-secondary empty-btn" type="submit">Empty cart</button>
                                <a class="btn btn-info" href="/" role="button">Keep browsing</a>
                            </form>

                        </div>
                    </div>

                    {{ range $.items }}
                    <div class="product-item">
                        <div class="row pt-2 mb-2">
                            <div class="col text-right image">
                                <a href="/product/{{.Item.Id}}">
                                    <img class="img-fluid" alt="" src="{{.Item.Picture}}" />
                                </a>
                            </div>
                            <div class="col text-left text">
                                <h4>{{ .Item.Name }}</h4>
                                <p><small class="text-muted">SKU: #{{ .Item.Id }}</small></p>
                                <div class="details">
                                    Quantity: {{ .Quantity }}<br/>
                                    <strong>
                                        {{ renderMoney .Price }}
                                    </strong>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{ end }}
                    <div class="row pt-2 my-3">
                        <div class="col text-center order-summary">
                            <p class="text-muted my-0">Shipping Cost: <strong>{{ renderMoney .shipping_cost }}</strong></p>
                            Total Cost: <strong>{{ renderMoney .total_cost }}</strong>
                        </div>
                    </div>

                    <div class="row py-3 my-2 checkout">
                        <div class="col-12 col-lg-8 offset-lg-2">
                            <h3 class="text-center">Checkout</h3>
                            <form action="/cart/checkout" method="POST">
                                <div class="form-row">
                                    <div class="col-md-5 mb-3">
                                            <label for="email">E-mail Address</label>
                                            <input type="email" class="form-control" id="email"
                                                name="email" value="someone@example.com" required>
                                        </div>
                                    <div class="col-md-5 mb-3">
                                        <label for="street_address">Street Address</label>
                                        <input type="text" class="form-control"  name="street_address"
                                            id="street_address" value="1600 Amphitheatre Parkway" required>
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <label for="zip_code">Zip Code</label>
                                        <input type="text" class="form-control"
                                            name="zip_code" id="zip_code" value="94043" required pattern="\d{4,5}">
                                    </div>

                                </div>
                                <div class="form-row">
                                    <div class="col-md-5 mb-3">
                                            <label for="city">City</label>
                                            <input type="text" class="form-control" name="city" id="city"
                                                value="Mountain View" required>
                                        </div>
                                    <div class="col-md-2 mb-3">
                                        <label for="state">State</label>
                                        <input type="text" class="form-control" name="state" id="state"
                                            value="CA" required>
                                    </div>
                                    <div class="col-md-5 mb-3">
                                        <label for="country">Country</label>
                                        <input type="text" class="form-control" id="country"
                                            placeholder="Country Name"
                                            name="country" value="United States" required>
                                    </div>
                                </div>
                                <div class="form-row">
                                    <div class="col-md-6 mb-3">
                                        <label for="credit_card_number">Credit Card Number</label>
                                        <input type="text" class="form-control" id="credit_card_number"
                                            name="credit_card_number"
                                            placeholder="0000-0000-0000-0000"
                                            value="4432-8015-6152-0454"
                                            required pattern="\d{4}-\d{4}-\d{4}-\d{4}">
                                    </div>
                                    <div class="col-md-2 mb-3">
                                        <label for="credit_card_expiration_month">Month</label>
                                        <select name="credit_card_expiration_month" id="credit_card_expiration_month"
                                            class="form-control">
                                            <option value="1">January</option>
                                            <option value="2">February</option>
                                            <option value="3">March</option>
                                            <option value="4">April</option>
                                            <option value="5">May</option>
                                            <option value="6">June</option>
                                            <option value="7">July</option>
                                            <option value="8">August</option>
                                            <option value="9">September</option>
                                            <option value="10">October</option>
                                            <option value="11">November</option>
                                            <option value="12">January</option>
                                        </select>
                                    </div>
                                    <div class="col-md-2 mb-3">
                                            <label for="credit_card_expiration_year">Year</label>
                                            <select name="credit_card_expiration_year" id="credit_card_expiration_year"
                                                class="form-control">
                                            {{ range $i, $y := $.expiration_years}}<option value="{{$y}}"
                                                {{if eq $i 1 -}}
                                                    selected="selected"
                                                {{- end}}
                                            >{{$y}}</option>{{end}}
                                            </select>
                                        </div>
                                    <div class="col-md-2 mb-3">
                                        <label for="credit_card_cvv">CVV</label>
                                        <input type="password" class="form-control" id="credit_card_cvv"
                                            name="credit_card_cvv" value="672" required pattern="\d{3}">
                                    </div>
                                </div>
                                <div class="form-row center-contents last-row">
                                    <button class="btn btn-info" type="submit">Place order</button>
                                </div>
                            </form>
                        </div>
                    </div>
                {{ end }} <!-- end if $.items -->

            </div>
            {{ if $.recommendations}}
                {{ template "recommendations" $.recommendations }}
            {{ end }}
        </div>
    </main>
    {{ template "footer" . }}
    {{ end }}
